<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>游戏详情</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>

        /*封面图样式*/
        .detail-cover-img {
            box-shadow: 0 0 6px #222326;
            border-radius: 3px;
            width: 150px;
            height: 180px;
            text-align: center;
        }

        /*游戏单列样式*/
        .game-lis {
            padding-top: 10px;
            border-bottom: 2px solid #d8d8d8;
        }

        /*游戏标题样式*/
        .game-bt {
            font-family: 'Microsoft YaHei', 'Arial', 'Heiti SC';
            text-decoration: none;
            width: 100%;
            height: 24px;
            line-height: 24px;
            float: left;
            font-size: 20px;
            color: #313131;
            font-weight: bold;
            overflow: hidden;
        }

        /*游戏信息样式*/
        .game-info {
            font-family: 'Microsoft YaHei', 'Arial', 'Heiti SC';
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width: 100%;
            height: 100%;
            font-size: 13px;
            color: #595959;
        }

        /*游戏描述样式*/
        .game-miaoshu {
            font-family: 'Microsoft YaHei', 'Arial', 'Heiti SC';
            padding: 0;
            width: 100%;
            height: 100%;
            line-height: 25px;
            overflow: hidden;
            font-size: 13px;
            color: #595959;
            float: left;
            margin-top: 10px;
        }

        li {
            font-family: 'Microsoft YaHei', 'Arial', 'Heiti SC';
            list-style: none;
            font-size: 13px;
            color: #595959;
            padding: 0;
            height: 100%;
            line-height: 30px;
            float: left;
            width: 25%;
            margin-right: 0.33%;
            overflow: hidden;
        }

        /*游戏截图样式*/
        .screenshot {
            width: 100%;
            height: 100%;
        }
        .bg_color{
            background-color: #23262E;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12 game-lis"><!--列布局-->
            <div class="layui-row game-row"><!--行布局-->
                <!--页面内组件代码-->
                <div class="layui-col-md2">
                    <img class="detail-cover-img"
                         src="">
                </div>
                <div class="layui-col-md9">
                    <a href="javascript:void(0)" class="game-bt" id="gName"></a>
                </div>
                <div class="layui-col-md9">
                    <ul class="game-info">

                    </ul>
                </div>
                <div class="layui-col-md9">
                    <div class="game-miaoshu"></div>
                </div>
                <!--选项卡-->
                <div class="layui-col-sm12 layui-row"><!--与上面布局形成嵌套自适应-->
                    <div class="layui-tab layui-tab-card">
                        <ul class="layui-tab-title">
                            <li class="layui-this">游戏截图</li>
                            <li id="gamesMsgCount_title">游戏评论(0)</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show layui-row"><!--嵌套游戏截图组件-->
                                <!--游戏截图组件-->
                                <fieldset class="layui-elem-field layui-field-title layui-col-sm12" id="screenshot">
                                    <legend><a>游戏截图</a></legend>
                                    <div class="layui-field-box">
                                        <!--截图内容-->
                                        <div class="layui-carousel" id="game_images" style="margin-top: 15px;">
                                            <div carousel-item id="game_images_list">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="layui-tab-item layui-row">
                                <fieldset class="layui-elem-field layui-field-title layui-col-sm12">
                                    <legend style="padding-bottom: 10px"><a id="gamesMsgCount">游戏评论(当前游戏有0条评论)</a>
                                    </legend>
                                    <div id="msgContent_box">
                                        <textarea id="msgContent" placeholder="说说你对这款游戏的看法吧"
                                                  class="layui-textarea"></textarea>
                                    </div>
                                    <br/>
                                    <button type="button" id="pl_btn" onclick="postMsg();"
                                            class="layui-btn layui-btn-danger layui-btn-fluid bg_color">发表评论
                                    </button>
                                    <br/>
                                    <br/>
                                    <div id="gameMsgList"></div>
                                    <div id="gameMsgListLimit"></div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--页面内组件代码end-->
        </div>
    </div>
</div>
</div>

<script src="../layui/layui.js"></script>
<script src="../layui/lay/modules/jquery-3.3.1.js"></script>
<script src="../layui/jquery.cookie.js"></script>
<script src="../backstage_web/html_js/utf.js"></script>
<script>
    layui.use(['layer', 'form', 'carousel', 'element','laypage'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var carousel = layui.carousel;//图片轮播组件
        var element = layui.element;//切换选项卡组件
        var $ = layui.jquery;
        var router = layui.router();
        var laypage = layui.laypage;


        var gid = router.search.gid;//从url获取到的gid
        var height = '500px';//图片轮播默认高度
        var game = null;//游戏信息对象
        var gImage = null;//游戏图片路径对象
        var gamesMsgCount = 0;//当前游戏留言条数
        var loginId_p=$.cookie('loginId');//获取cookie

        //登陆验证
        $(document).ready(function () {
            if (loginId_p==null||loginId_p=='null') {//判断是否登陆 =null=没登陆
                $('#msgContent').attr("placeholder","您当前尚未登陆,暂时无法评论.请返回首页登陆后在评论!");//更新提示语
                $('#msgContent').attr("disabled","disabled");//禁用评论标签输入
                $("#pl_btn").removeClass("layui-btn-danger").addClass("layui-btn-disabled");//关闭评论按钮
                $("#pl_btn").removeClass("bg_color");//移除颜色
                $("#pl_btn").attr("onclick",null);//关闭评论按钮调用函数
            }
        })
        
        
        //获取需要显示的游戏信息
        $.get("/games_info_sys/games/selectOneGame.do?gId=" + gid, function (res) {
            game = res;//接收游戏信息对象
            gImage = res.gImagevo;//接收预览图对象
            $('.detail-cover-img').attr('src',gImage.url1);//获取封面
            $('#gName').append(game.gCnName+'<span>（'+game.gEnName+'）</span>');//显示中英文游戏名
            $('.game-info').append('<li>发售：'+game.gTime+'</li>\n' +
                '                        <li>厂商：'+game.gMaker+'</li>\n' +
                '                        <li>官网：<a href="' + game.gUrl + '" target="_blank" >点击进入</a> </li>\n' +
                '                        <li>平台：'+game.gPlatform+'</li>\n' +
                '                        <li>类型：'+game.gType+'</li>\n' +
                '                        <li>语言：'+game.gLang+'</li>');//显示游戏信息
            $('.game-miaoshu').text(game.gInfo);//显示游戏描述
            $('#game_images_list').append(
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url2+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url3+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url4+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url5+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url6+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url7+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url8+'"/>\n' +
                '</div>\n' +
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url9+'"/>\n' +
                '</div>\n'+
                '<div style="background-color: #333333"><img class="screenshot" src="'+gImage.url10+'"/>\n' +
                '</div>');
        });

        //获取当前游戏留言总数
        $.get("/games_info_sys/msg/getGamesMsgCount.do?msgBelong="+gid,function (res) {
            gamesMsgCount = res;//当前游戏留言条数
            $('#gamesMsgCount').text('游戏评论(当前游戏有' + gamesMsgCount + '条评论)');
            $('#gamesMsgCount_title').text('游戏评论(' + gamesMsgCount + ')');
            //分页组件
            laypage.render({
                elem: 'gameMsgListLimit'
                ,count: gamesMsgCount//数据总数，从服务端得到
                ,theme: '#23262E'
                ,jump:function (obj,first) {
                    $('#gameMsgList').empty();
                    //获取需要显示的当前游戏评论信息
                    $.get("/games_info_sys/msg/selectMsgsLimitByGid.do?msgBelong=" + gid+'&page='+obj.curr, function (res) {
                        //遍历显示data中的留言数据
                        layui.each(res.data, function (index, item) {
                            $('#gameMsgList').append('<fieldset class="layui-elem-field">\n' +
                                '                                        <legend style="font-size:15px">' + item.msgAuthor + '</legend>\n' +
                                '                                        <legend style="font-size:5px">' + item.msgTime + '</legend>\n' +
                                '                                        <div class="layui-field-box" style="padding-left: 30px">\n' +
                                '                                            ' + item.msgContent + '\n' +
                                '                                        </div>\n' +
                                '                                    </fieldset>\n');
                        });
                    })
                }
            });

        })




        //延迟0.2s加载图片轮播,等待js脚本执行完成
        setTimeout(function () {
            //图片轮播
            carousel.render({
                elem: '#game_images'
                , interval: 10000
                , anim: 'fade'
                , height: getHeight($('#screenshot').width())
                , width: '100%'
            });
        }, 500)

        //点击发表评论按钮发送数据
        window.postMsg = function () {
            //点击过后立即关闭
            $("#pl_btn").removeClass("layui-btn-danger").addClass("layui-btn-disabled");
            //将获取到的数据组装成JSON字符串
            var gameMsg = {
                "msgContent": $('#msgContent').val(),
                "msgTime": getNowTime(),
                "msgAuthor":utf8to16(atob(loginId_p)).substring(8,utf8to16(atob(loginId_p)).length),
                "msgBelong": gid
            };
            $.ajax({
                url: "/games_info_sys/publicUser/insertMsg.do",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(gameMsg),
                success: function (res) {
                    layer.msg(res.msg);
                    $('#gamesMsgCount').text('游戏评论(当前游戏有' + res.count + '条评论)');
                    $('#gamesMsgCount_title').text('游戏评论(' + res.count + ')');//更新评论总数
                    $("#pl_btn").removeClass("layui-btn-disabled").addClass("layui-btn-danger");//按钮恢复正常
                    $('#msgContent_box').load("detail_game_page.html #msgContent");
                    //在顶部追加新评论
                    if(res.msg=="评论成功"){
                    $('#gameMsgList').prepend('<fieldset class="layui-elem-field">\n' +
                        '                                        <legend style="font-size:15px">' + gameMsg.msgAuthor + '</legend>\n' +
                        '                                        <legend style="font-size:5px">' + gameMsg.msgTime + '</legend>\n' +
                        '                                        <div class="layui-field-box" style="padding-left: 30px">\n' +
                        '                                            ' + gameMsg.msgContent + '\n' +
                        '                                        </div>\n' +
                        '                                    </fieldset>\n');
                    }
                },
                error: function () {
                    layer.msg("评论提交出错,请检查网络并刷新");
                    $("#pl_btn").attr("disabled", "disabled");//禁用按钮
                }
            });
        }


        //每当窗口大小变动掉用函数重载图片轮播组件更新高度值
        $(window).resize(function () {
            height = getHeight($('#screenshot').width());
            //图片轮播重载
            carousel.render({
                elem: '#game_images'
                , interval: 10000
                , anim: 'fade'
                , height: height
                , width: '100%'
            });
        })

        //获取16:9比例高度,简单保证图片显示比例为16:9
        function getHeight(width) {
            return width / 1920 * 1080 + 'px';
        }

        //获取当前时间字符串
        function getNowTime() {
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var date = myDate.getDate();//获取当前日
            var h = myDate.getHours();//获取当前小时数(0-23)
            var m = myDate.getMinutes();//获取当前分钟数(0-59)
            var nowTime = year + '-' + mon + '-' + date + '  ' + h + ':' + m;
            return nowTime;
        }
    });

</script>

</body>
</html>